<template>
<!-- <el-scrollbar style="height: 100%;" class="scrollbar-for"> -->
  <div id="app">
      <!-- backtop -->
    <el-tooltip placement="top" content="回到顶部">
    <back-to-top bottom="80" :visibility-height="300" :back-position="0" transition-name="fade"  />
    </el-tooltip>
    <!-- 显示块 -->
    <router-view v-if="isShow"></router-view>
    <mymessage v-show="showMessagePanel" :content="dynamicContent" @closeMessage="closeMessage"></mymessage>
    <myLoading v-show="showLoading"></myLoading>
  </div>
   <!-- </el-scrollbar> -->
</template>

<script>
import  BackToTop from 'element-ui/packages/backtop/src/main'
import mymessage from './views/pops/mymessage.vue'
import myLoading from './views/pops/loading.vue'
export default {
  name: 'App',
   components: { BackToTop, mymessage, myLoading},
   data() {
    return {
      isShow: true,
      showLoading:false,
      showMessagePanel:false,
      dynamicContent:'', 
    };
  },
   provide() {
    return {
      reload: this.reload, //全局刷新     在组件 inject: ['reload'] 注入
      MyMessage:this.MyMessage,
      MyLoading:this.MyLoading,
    };
  },
  methods: {
    //关闭消息组件
    closeMessage(data){
      this.showMessagePanel = data;
    },
    MyMessage(content){
       this.showMessagePanel = true;
      this.dynamicContent = content;
    },
    MyLoading(data){
      this.showLoading = data;
    },
    //全局刷新方法
    reload() {
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
  },
}
</script>

<style>
body{
  padding: 0;
  margin: 0;
}
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
/* //滑块部分 */
::-webkit-scrollbar-thumb { 
  border-radius: 5px;
  background-color: rgb(214, 214, 214);
}
/* //轨道部分 */
::-webkit-scrollbar-track { 
  /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
  background: transparent;
  border-radius: 5px;
}
/* 选中文字 */
::-moz-selection { background: #777474; color: white; /* Firefox */ }
::selection { background: #777474; color: white; /* Opera,Safari,Chrome */}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50; 

}
a{
  text-decoration: none;
}
.Breadcrumb{
    margin-top: 20px;
    margin-left: 57px;
    margin-bottom: 20px;
}



/* 页面加载进度条 */
#nprogress .bar {
    background: #fdffff !important; 
}

/* .scrollbar-for .el-scrollbar__wrap {
  overflow: hidden;
  overflow-y: scroll; 
} */

</style>
